<template>
    <div>
        <Modal style="z-index: 0" width="1200"
               v-model="topicPreviewModal.topicPreviewFlag"
               @on-ok="ok"
               :mask-closable="false"
               @on-cancel="cancel"
               :styles="{top: '100px'}"
               :loading="loading"
               title="题库解析预览">
            <div style="max-height:600px;overflow-y:auto;overflow-x:hidden;">
                <Row type="flex" align="middle">
                    <Col span="2">课程名称</Col>
                    <Col style="position: relative;right: 30px" span="10">
                        <Select v-model="courseId">
                             <Option v-for="item in courseList" :key="item.courseId" :value="item.courseId" >{{item.courseName}}</Option>
                        </Select>
                    </Col>
                </Row>
                <div v-for="(value,oIndex) in topicPreviewModal.subjectMap" :key="oIndex">
                    <div v-if="value[1].length>0">
                        <Row>
                            <Col span="22"><h3>{{value[0]}}</h3></Col>
                            <Col span="2">
                                <Button size="small" type="primary" class="mybtn2" @click="addTiele(value[0])" icon="ios-add"></Button>
                            </Col>
                        </Row>
                        <div class="mydiv" v-for="(index,sindex) in value[1]">
                            <Row>
                                <Col span="22">
                                    <froala :tag="'textarea'" :config="config" v-model="index.subTitle"></froala>
                                </Col>
                                <Col span="2">
                                    <ButtonGroup style="float: right" shape="circle">
                                        <Button size="small" @click="addTitleInfo(value[0],sindex)" type="primary"  icon="ios-add"></Button>
                                        <Button size="small" @click="removeTiele(value[0],sindex)" type="error"  icon="ios-remove"></Button>
                                    </ButtonGroup>
                                </Col>
                            </Row>
                            <!--如果是选着题选项-->
                            <div v-if="index.options!=undefined" v-for="(item,indexs) in index.options">
                                <Row>
                                    <Col span="22">
                                        <froala :tag="'textarea'" :config="config" v-model="item.optionInfo"></froala>
                                    </Col>
                                    <Col span="2">
                                        <Button @click="removeOption(sindex,indexs)"
                                                class="Mybtn" size="small" type="error" icon="ios-remove"></Button>
                                    </Col>
                                </Row>
                            </div>
                            <!--如果是案例题-->
                            <div v-if="index.articleChildrenSubtitle!=undefined" v-for="(item2,ssindex) in index.articleChildrenSubtitle">
                                <Row>
                                    <Col span="22">
                                        <froala :tag="'textarea'" :config="config" v-model="item2.subTitle"></froala>
                                    </Col>
                                    <Col span="2">
                                        <ButtonGroup style="float: right" shape="circle">
                                            <Button size="small" @click="addTitleInfo('案例题',ssindex)" type="primary" icon="ios-add"></Button>
                                            <Button size="small" @click="removeTiele('案例题',ssindex)" type="error" icon="ios-remove"></Button>
                                        </ButtonGroup>
                                    </Col>
                                </Row>
                                <div v-if="item2.options!=undefined" v-for="(item3,ssindexs) in item2.options">
                                    <Row>
                                        <Col span="22">
                                            <froala :tag="'textarea'" :config="config" v-model="item3.optionInfo"></froala>
                                        </Col>
                                        <Col span="2">
                                            <Button @click="removeOption(ssindex,ssindexs)"
                                                    class="Mybtn" size="small" type="error" icon="ios-remove"></Button>
                                        </Col>
                                    </Row>
                                </div>
                            </div>

                            <div v-if="index.subAnswer!=null">
                                <strong>答案</strong>
                                <Row>
                                    <Col span="22">
                                        <froala :tag="'textarea'" :config="config" v-model="index.subAnswer"></froala>
                                    </Col>
                                    <Col span="2">
                                        <Button @click="removeAnswerOrAnalyzeOrOther('答案',value[0],sindex)"
                                                class="Mybtn" size="small" type="error" icon="ios-remove"></Button>
                                    </Col>
                                </Row>
                            </div>
                            <div v-if="index.subAnsweranalysis!=null">
                                <strong>解析</strong>
                                <Row>
                                    <Col span="22">
                                        <froala :tag="'textarea'" :config="config" v-model="index.subAnsweranalysis"></froala>
                                    </Col>
                                    <Col span="2">
                                        <Button @click="removeAnswerOrAnalyzeOrOther('解析',value[0],sindex)"
                                                class="Mybtn" size="small" type="error" icon="ios-remove"></Button>
                                    </Col>
                                </Row>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        props: {
            topicPreviewModal: {
                topicPreviewFlag: false,
                subjectMap: new Map(),
            }
        },
        data() {
            return {
                courseId:null,
                courseList :null,
                loading : true,
                config: {
                    language: 'zh_cn',
                    toolbarInline: true,
                    charCounterCount: false,
                    toolbarVisibleWithoutSelection: true,
                    toolbarButtons: ['fontSize', 'codeView', 'bold', 'italic', 'underline', 'strikeThrough', 'paragraphFormat', 'align',
                                     'formatOL', 'formatUL', 'insertImage', 'undo', 'redo', 'paragraphStyle', 'insertHR', 'quote',
                                     'lineHeight', 'clearFormatting', 'inlineStyle', 'inlineClass', 'superscript', 'subscript'],
                    events: {
                        initialized: function () {
                        }
                    }
                },
            }
        },
        methods: {
            /**
             * 点击确定的时候
             */
            ok() {
                let data = {
                    "multipleChoiceList":this.topicPreviewModal.subjectMap.get("选着题"),
                    "trueOrFalseList":this.topicPreviewModal.subjectMap.get("判断题"),
                    "shortAnswerList":this.topicPreviewModal.subjectMap.get("简答题"),
                    "essayQuestionsList":this.topicPreviewModal.subjectMap.get("论述题"),
                }
                this.http.post("/qB/saveCourseBindingquestionBank",this.qs.parse(data)).then(res=>{
                    if(res.data){
                        this.$Message.success("成功了！！！")
                        this.loading = false
                        this.$parent.topicPreviewModal.topicPreviewFlag = false
                    }
                })
                //  this.$parent.topicPreviewModal.topicPreviewFlag = false
            },
            cancel() {
                this.$parent.topicPreviewModal.topicPreviewFlag = false
            },
            /**
             * 添加题目
             * @param type
             */
            addTiele(type) {
                switch (type) {
                    case "选着题":
                        this.topicPreviewModal.subjectMap.get(type).push({
                            title: "1.恢复出厂",
                            options: [],
                            subAnswer: null,
                            subAnsweranalysis: null
                        })
                        break;
                }
                this.topicPreviewModal.subjectMap = new Map(this.topicPreviewModal.subjectMap)
                this.$Message.success("添加成功！！！")
            },
            /**
             * 提示添加类型
             * @param name
             * @param index
             */
            addTitleInfo(name, index) {
                let infotype = null;
                let that = this
                this.$Modal.confirm({
                    title: "提示！！！",
                    render: (h) => {
                        return <radio-group v-model={infotype}>
                                    <Radio v-show={name == "选着题"} label="选项"></Radio>
                                    <Radio label="答案"></Radio>
                                    <Radio label="解析"></Radio>
                                </radio-group>

                    },
                    onOk() {
                        switch (infotype) {
                            case "选项":
                                that.topicPreviewModal.subjectMap.get(name)[index].options.push({"optionInfo": ""})
                                break;
                            case "答案":
                                that.topicPreviewModal.subjectMap.get(name)[index].subAnswer = ""
                                break;
                            default:
                                that.topicPreviewModal.subjectMap.get(name)[index].subAnsweranalysis = ""
                                break;
                        }
                        that.topicPreviewModal.subjectMap = new Map(that.topicPreviewModal.subjectMap)
                        this.$Message.success("添加成功！！！")
                    }
                })

            },
            /**
             * 删除题目
             * @param type
             * @param sindex
             */
            removeTiele(type, sindex) {
                this.topicPreviewModal.subjectMap.get(type).splice(sindex, 1)
                this.topicPreviewModal.subjectMap = new Map(this.topicPreviewModal.subjectMap)
            },
            /**
             * 删除选项
             * @param sindex
             * @param indexs
             */
            removeOption(sindex, indexs) {
                this.topicPreviewModal.subjectMap.get("选着题")[sindex].options.splice(indexs, 1)
                this.topicPreviewModal.subjectMap = new Map(this.topicPreviewModal.subjectMap)
            },
            /**
             * 删除答案或者解析或者其他
             * @param name
             * @param type
             * @param index
             */
            removeAnswerOrAnalyzeOrOther(name, type, index) {
                switch (name) {
                    case "答案":
                        this.topicPreviewModal.subjectMap.get(type)[index].subAnswer = null
                        break;
                    case "解析":
                        this.topicPreviewModal.subjectMap.get(type)[index].subAnsweranalysis = null
                        break;
                    default:
                        this.topicPreviewModal.subjectMap.get(type)[index].remarks = ["无"]
                        break;
                }
                this.topicPreviewModal.subjectMap = new Map(this.topicPreviewModal.subjectMap)
                this.$Message.success("删除成功！！！")
            },
        },
        watch: {
            'topicPreviewModal.topicPreviewFlag'(val) {
                if (val) {
                 this.http.get('/qB/getAllCourse').then(res=>{
                     this.courseList = res.data
                 })
                }
            },
            courseId(val){
                this.topicPreviewModal.subjectMap.forEach(item=>{
                    item.forEach(item2=>{
                        item2.courseId = val
                    })
                })
                console.log(this.topicPreviewModal.subjectMap)
            }
        },
    }
</script>

<style scoped>
    .Mybtn {
        margin: 3px 11px 3px;
        float: right
    }

    .mydiv {
        margin: 10px 0 10px;
        padding: 8px;
        border-radius: 5px;
        background-color: #ececec
    }

    .mybtn2 {
        margin: 0 19px;
        float: right
    }
</style>
